<template>
  <div class="detailContainer">
    <div class="banner">
      <img :src="detail.detailLogoUrl" alt>
      <div class="statusIcon" v-if="detail.type===1">
        <img src="../../assets/img/tips/reporting.png" alt>
      </div>
      <div class="statusIcon" v-if="detail.type===2">
        <img src="../../assets/img/tips/going.png" alt>
      </div>
      <div class="statusEnd" v-if="detail.type===3">
        <div class="statusEndIn">已结束</div>
      </div>
      <div class="lingar"></div>
    </div>
    <div class="reportBoxIn">
      <div class="reportBoxBorder">
        <div class="reportBoxInTin">
          <div class="flowPath">
            <img src="../../assets/img/tips/path.png" alt>
          </div>
          <div class="inputBox firstInput">
            <input type="text" placeholder="请输入姓名" maxlength="6" v-model="reportForm.name">
          </div>
          <div class="inputBox">
            <input type="tel" maxlength="11" placeholder="请输入您的手机号" v-model="reportForm.phone">
          </div>
          <!-- <div class="selectAdress"> -->
          <div class="inputBox lastInput" @click="popVis">
            <!-- <div class="adress">{{reportForm.adress}}</div>
                            <div class="arrow">
                                <img src="../../assets/img/icon/home/unfold2.png" alt="">
              </div>-->
            <input placeholder="请选择参团乘车点" readonly v-model="reportForm.gatherPlaceName">
            <div class="arrow">
              <img src="../../assets/img/icon/home/unfold2.png" alt>
            </div>
          </div>
          <div class="sub end" v-if="detail.type===3">已结束</div>
          <div class="sub" v-else @click="submit">提交报名</div>
          <div class="rollBox">
            <div class="allNumber">
              已有
              <span>{{signNum}}</span>人报名
            </div>
            <Rolling :notices="rollList"></Rolling>
          </div>
        </div>
      </div>
    </div>
    <div class="zcGoodsBox" >
      <div class="zcGoodsBoxCon" v-if="goodsList.length">
        <div class="zcTitleBox">
          <div class="zcTitleIn">
            <div class="star">
              <img src="../../assets/img/icon/home/label1.png" alt>
            </div>
            <div class="title payTitle">直采商品</div>
            <div class="star">
              <img src="../../assets/img/icon/home/label1.png" alt>
            </div>
          </div>
        </div>
        <p class="tip">直采价远低于零售价，厂商担心泄露，具体品牌价格现场公开</p>
        <div class="forListBox">
          <div class="forListBoxCon">
            <div class="item" v-for="(item,index) in goodsList" :key="index">
              <div class="itemLeft">
                <img :src="item.logoUrl" alt>
              </div>
              <div class="itemRight">
                <div class="goodsName">{{item.title}}</div>
                <div class="description">{{item.description}}</div>
                <div class="price zcPrice">
                  直采价：
                  <span>{{item.dcPrice}}</span>
                </div>
                <div class="price salePrice">
                  市场价：
                  <span>{{item.marketPrice}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="expendBox" v-if="goodsList.length>5||goodsList.length==5">
            <div class="expend">
              <img src="../../assets/img/button/more_60.png" alt @click="expend">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="oganizationBox">
      <div class="oganization">
        <div class="zcTitleBox">
          <div class="zcTitleIn">
            <div class="star">
              <img src="../../assets/img/icon/home/label1.png" alt>
            </div>
            <div class="title payTitle">消费者组织，商业的未来</div>
            <div class="star">
              <img src="../../assets/img/icon/home/label1.png" alt>
            </div>
          </div>
        </div>
        <p class="tip tip1">大件会 消费者自己的组织 帮每个消费者守好钱包</p>
        <div class="aboutPic">
          <div>
           <ul>
             <li><img src="../../assets/img/detail/1@3.png" alt=""></li>
             <li><img src="../../assets/img/detail/2@3.png" alt=""></li>
             <li><img src="../../assets/img/detail/3@3.png" alt=""></li>
             <li><img src="../../assets/img/detail/4@3.png" alt=""></li>
             <li><img src="../../assets/img/detail/5@3.png" alt=""></li>
             <li><img src="../../assets/img/detail/6@3.png" alt=""></li>
           </ul>
          </div>
        </div>
        <div class="zcTitleBox">
          <div class="zcTitleIn">
            <div class="star">
              <img src="../../assets/img/icon/home/label1.png" alt>
            </div>
            <div class="title payTitle">为什么大件会70%会员来自口碑介绍</div>
            <div class="star">
              <img src="../../assets/img/icon/home/label1.png" alt>
            </div>
          </div>
        </div>
        <p class="tip2">会员公约</p>
        <p class="tip tipMrg">如果你跟着大件会买东西省钱了，请告诉你的朋友；</p>
        <p class="tip tipMrg2">如果你跟着大件会买东西没省钱，也请告诉你的朋友！</p>
        <div class="pathIcon">
          <img src="../../assets/img/icon/home/tese.png" alt>
        </div>
        <div class="bgLIne"></div>
        <div class="zcTitleBox">
          <div class="zcTitleIn">
            <div class="star">
              <img src="../../assets/img/icon/home/label1.png" alt>
            </div>
            <div class="title payTitle">参团方式</div>
            <div class="star">
              <img src="../../assets/img/icon/home/label1.png" alt>
            </div>
          </div>
        </div>
        <p class="tip tipMrg">专车准点发车，请提前20分钟左右到达集合点。</p>
        <p class="tip tipMrg3">因直采品类不同，集合时间和地点以当前直采通知为准。</p>
        <div class="arriveAdress">
          <div class="arriveTime">
            <div class="arriveTimeHead">
              <img src="../../assets/img/icon/home/time_r.png" alt="">
              <span>集合时间：</span>
            </div>
            <p class="tip tipGo">直采当天 8:40-9:00，空调大巴车免费接送</p>
          </div>
          <div class="arriveAdressBottom">
            <div class="arriveTime">
              <div class="arriveTimeHead">
                <img src="../../assets/img/icon/home/dingwei.png" alt="">
                <span>集合地点：</span>
              </div>
            </div>
            <div class="arriveAdressList">
              <ul>
                <li v-for="(item,index) in detail.placeList" :key="index" class="moreText">
                  <span>{{item.name}}</span>：
                  <span>{{item.address}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="zcTitleBox">
          <div class="zcTitleIn">
            <div class="star">
              <img src="../../assets/img/icon/home/label1.png" alt>
            </div>
            <div class="title payTitle">现场与报道</div>
            <div class="star">
              <img src="../../assets/img/icon/home/label1.png" alt>
            </div>
          </div>
        </div>
        <p class="allNumber tipMrg3">30万会员，100万参团人次</p>
        <div class="swiperPic" ref="swiperPic">
          <img src="../../assets/img/detail/1.png" alt>
          <img src="../../assets/img/detail/2.png" alt>
          <img src="../../assets/img/detail/3.png" alt>
          <img src="../../assets/img/detail/4.png" alt>
          <img src="../../assets/img/detail/5.png" alt>
        </div>
      </div>
    </div>
    <div class="foot wbox">
      <div class="wfl footLeft">
        <div class="indexIcon" @click="goHome">
          <img src="../../assets/img/icon/home/home.png" alt>
          <div>首页</div>
        </div>
        <div class="indexIcon" @click="goVip">
          <img src="../../assets/img/icon/home/mine.png" alt>
          <div>我的</div>
        </div>
        <div class="indexIcon">
          <img src="../../assets/img/icon/home/service_l.png" alt>
          <div>
            <a :href="detail.phone">客服</a>
          </div>
        </div>
      </div>
      <div class="subBtn endBtn" v-if="detail.type===3">已结束</div>
      <div class="subBtn" v-else @click="submit">提交报名</div>
    </div>
    <div>
      <div class="person" v-if="showTop" @click="goTop(100)">
        <img src="../../assets/img/icon/home/top.png" alt>
      </div>
    </div>
    <div @touchmove.prevent>
      <mt-popup class="mint-popup-4" v-model="popupVisible" position="bottom" popup-transition="popup-fade">
        <div class="popIn">
          <p class="title">乘车集合点</p>
          <p class="sug">为安排集合地点车辆，统计物料，请认真填写就近集合地点</p>
          <mt-picker :slots="slots" @change="onValuesChange" showToolbar valueKey="address">
          </mt-picker>
          <div class="popBtnBox">
            <div class="popBtn" @click="ensureAddress">确定</div>
          </div>
        </div>
      </mt-popup>
    </div>
  </div>
</template>
<script>
import Rolling from "../../components/rolling/index";
// import $ from 'jquery';
import api from "../../api/index.js";
import { Popup, Toast, Picker } from "mint-ui";
import { photoPre, localSiteId } from "../../common/util/index.js";
// import { Swiper,SwiperItem } from 'vux'
// import { swiper, swiperSlide } from "vue-awesome-swiper";
var isTop = true;
var timer = null;
export default {
  name: "detail",
  components: {
    Rolling
    // swiper,
    // swiperSlide
  },
  data() {
    return {
      detail: {},
      reportForm: {
        gatherPlaceName: "",
        name: "",
        phone: ""
      },
      goodsList: [],
      popupVisible: false,
      slots: [
        {
          values: []
        }
      ],
      rollList: [],
      signNum: "",
      // autoHeight: true,
      centeredSlides: true,
      showTop: false,

      timer: null
    };
  },
  created() {
    this.actId = this.$route.query.id;
    console.log(this.actId);
    this.detailReq();
    this.goodsListReq();
    this.signUpInfoReq();
    if (!isTop) {
      clearInterval(timer);
    }
    isTop = false
    this.reportForm.phone = localStorage.getItem('Phone');
    this.phone = localStorage.getItem('Phone');
    console.log(this.reportForm.phone)
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer);
  },
  mounted() {
    this.$refs["swiperPic"].scrollTo(
      (694 - document.documentElement.clientWidth) / 2,
      this.$refs["swiperPic"].scrollLeft
    );
    window.addEventListener("scroll", this.hideTop);
  },

  destroyed() {
    window.removeEventListener("scroll", this.hideTop);
  },

  methods: {
    onValuesChange(picker, values) {
      console.log(values);
      this.selectAdrre = values;
      this.message = values;
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
    },
    detailReq() {
      let obj = {
        actId: this.actId
      };
      api.InfoApi(obj).then(res => {
        console.log(res);
        if ((res.msgCode = "000")) {
          this.detail = res.data;
          this.detail.detailLogoUrl = photoPre + this.detail.detailLogoUrl;
          // let addressArr=this.detail.placeList.map(item=> item.address);
          let addressArr = this.detail.placeList;
          this.slots[0].values = addressArr;
          this.detail.phone=`tel: ${this.detail.phone}`;
          
        } else {
          Toast({
            message: res.msg,
            position: "middle",
            duration: 5000
          });
        }
      });
    },
    signUpInfoReq() {
      let obj = {
        id: this.actId
      };
      api.signUpInfoApi(obj).then(res => {
        console.log(res);
        if ((res.msgCode = "000")) {
          this.rollList = res.data.phone;
          this.rollList = this.rollList.map(
            item => (item = this.hideMobileNumber(item))
          );
          this.signNum = res.data.signNum;
        } else {
          Toast({
            message: res.msg,
            position: "middle",
            duration: 5000
          });
        }
      });
    },
    goodsListReq() {
      let obj = {
        id: this.actId
      };
      api.goodsListApi(obj).then(res => {
        console.log(res);
        if ((res.msgCode = "000")) {
          res.data.map(item => {
            item.logoUrl = photoPre + item.logoUrl;
          });
          this.decreaseArr = res.data;
          this.goodsList = res.data;
          this.goodsList = this.decreaseArr.splice(0, 5);
          // console.log(this.decreaseArr)
        } else {
          Toast({
            message: res.msg,
            position: "middle",
            duration: 5000
          });
        }
      });
    },
    expend() {
      // console.log(this.decreaseArr)
      let arr = this.decreaseArr.splice(0, 5);
      this.goodsList = this.goodsList.concat(arr);
      // console.log(this.goodsList)
    },
    ensureAddress() {
      if (!this.selectAdrre.length) {
        if(!this.slots[0].values.length) {
          this.reportForm.gatherPlaceName = this.slots[0].values[0].address;
          this.reportForm.gatherPlaceId = this.slots[0].values[0].placeId;
        }
      } else {
        console.log(this.selectAdrre)
          if(this.selectAdrre[0]) {
            this.reportForm.gatherPlaceName = this.selectAdrre[0].address;
            this.reportForm.gatherPlaceId = this.selectAdrre[0].placeId;
          }
               
      }
      this.popupVisible = false;
    },
    submit() {
      let reg = /^1[23456789]\d{9}$/.test(this.reportForm.phone);
      if (!reg) {
        Toast({
          message: "手机号格式不正确",
          position: "middle",
          duration: 5000
        });
        return;
      }
      if (!this.reportForm.gatherPlaceName) {
        Toast({
          message: "集合点不能为空",
          position: "middle",
          duration: 5000
        });
        return;
      }
      this.reportForm.loginPhone = this.phone;
      this.reportForm.actId = this.actId;
      this.reportForm.actName = this.detail.name;
      this.reportForm.source = "3";
      this.reportForm.siteId = localStorage.getItem("siteId");
      this.reportForm.formIds = "oaiO9vzSqJVDi8gogUpyoxkCemno";
      // this.reportForm.formIds = localStorage.getItem('fromuId');
      api.signupApi(this.reportForm).then(res => {
        if (res.msgCode === "000") {
          Toast({
            message: "恭喜你报名成功",
            position: "middle",
            duration: 5000
          });
          this.signUpInfoReq();
          this.reportForm.name = {};
          Object.keys(this.reportForm).map(item => {
            this.reportForm[item] = "";
          });
        } else {
          Toast({
            message: res.msg,
            position: "middle",
            duration: 5000
          });
        }
      });
    },
    goHome() {
      this.$router.push("/");
    },
    goTop(i) {
      timer = setInterval(function() {
        var osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        var ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        isTop = true;
        if (osTop == 0) {
          clearInterval(timer);
        }
      }, 30);
    },
    hideTop(e) {
      // console.log(e)
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > 50) {
        this.showTop = true;
      } else {
        this.showTop = false;
      }
    },
    popVis() {
      this.popupVisible = true;
    },
    goVip() {
      this.$router.push("/mine");
    },
    hideMobileNumber: function(value) {
      value = value + "";
      let newNumber = value.substr(0, 3) + "****" + value.substr(7);
      return newNumber;
    }
  }
};
</script>
<style lang="less" scoped>
.detailContainer {
  min-height: 100vh;
  background-color: #f7f7f7;
  text-align: center;
}
.bgLIne {
  height: 10px;
  background-color: #f7f7f7;
}
.lingar {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 20px;
  background-image: linear-gradient(top, 
		rgba(255,255,255,1) 100%, 
		rgba(255,255,255,0) 0%);
}
.foot {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 55px;
  background-color: #ffffff;
  box-shadow: 0px -4px 30px 0px rgba(0, 0, 0, 0.06);
  color: #555;
    font-size: 12px;
  a{
    color: #555;
    font-size: 12px;
  }
  .footLeft {
    display: flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    align-items: center;
    .indexIcon {
      img {
        width: 20px;
      }
    }
  }
  .subBtn {
    width: 180px;
    line-height: 55px;
    height: 55px;
    background-color: #f73657;
    font-size: 18px;
    color: #fff;
  }
  .endBtn {
    background-color: #ccc;
  }
}
.person {
  position: fixed;
  bottom: 96px;
  right: 16px;
  z-index: 100;
  img {
    width: 55px;
  }
}
.banner {
  width: 100%;
  //  height: 200px;
  position: relative;
  img {
    display: block;
  }
}
.statusIcon {
  position: absolute;
  left: 0;
  top: 0;
  img {
    width: 57px;
  }
}
.statusEnd {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  display: -webkit-flex;
  .statusEndIn {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
}
.rollBox {
  text-align: left;
  display: flex;
  display: -webkit-box;
  .allNumber {
    //  display: inline-block;
    display: flex;
    align-items: center;
    width: 33.3%;
    font-size: 12px;
    color: #777;
    height: 30px;
    line-height: 30px;
    margin-top: 5px;
    span {
      color: #f73657;
    }
  }
}
.popIn {
  padding-top: 20.5px;
  .title {
    font-size: 18px;
    margin-bottom: 8px;
  }
  .sug {
    font-size: 12px;
    color: #777;
  }
}
.picker {
  width: 100%;
  position: relative;
  padding: 0 16px;
  box-sizing: border-box;
}
.picker /deep/ .picker-toolbar {
  width: 100%;
}
.picker /deep/ .picker-items {
  width: 100%;
  /* position: absolute;
    top: 0; */
}
.usi-btn-sure {
  width: 100%;
  height: 45px;
  background-color: #f73657;
  position: absolute;
  bottom: 0;
}
.popBtnBox {
  padding: 0 16px 19.5px 16px;
  box-sizing: border-box;
}
.popBtn {
  width: 100%;
  height: 45px;
  line-height: 45px;
  color: #fff;
  background-color: #f73657;
  border-radius: 3px;
  font-size: 16px;
}
.mint-popup-4 {
  width: 100%;
  .picker-slot-wrapper,
  .picker-item {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Chrome 和 Safari */
    -moz-backface-visibility: hidden; /* Firefox */
    -ms-backface-visibility: hidden;
  }
}
.swiperPic {
  display: flex;
  overflow-x: scroll;
  img {
    display: block;
    width: 220px;
    height: 145px;
    margin-right: 8.5px;
  }
  img :last-child {
    margin-right: 0;
  }
}
.reportBoxIn {
  background-color: #f7f7f9;
  z-index: 10;
  .reportBoxBorder {
    padding: 0 16px;
    background-color: #fff;
  }
  .reportBoxInTin {
    position: relative;
    top: -20px;
    background-color: #ffffff;
    box-shadow: 0px 4px 16px 0px rgba(31, 28, 92, 0.05);
    border-radius: 5px;
    padding: 20px 21.5px;
    box-sizing: border-box;
  }
  .flowPath {
    img {
      width: 100%;
    }
  }
  .inputBox {
    width: 100%;
    margin-top: 10px;
    input {
      width: 100%;
      height: 40px;
      background-color: #ffffff;
      border-radius: 3px;
      border: solid 1px #f73657;
      padding-left: 15.5px;
      font-size: 14px;
      box-sizing: border-box;
      ::placeholder {
        color: #eee;
      }
    }
  }
  .firstInput {
    margin-top: 20px;
  }
  .lastInput {
    margin-bottom: 15px;
    position: relative;
    .arrow {
      position: absolute;
      // top: 50%;
      // right: 10px;
      // transform: translateY(-50%);
      height: 40px;
      line-height: 43px;
      width: 40px;
      top: 0;
      right: 0;
      img {
        width: 12px;
      }
    }
    ::placeholder {
      color: #333333;
    }
  }
  .selectAdress {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding-left: 15.5px;
    color: #333333;
    font-size: 14px;
    height: 40px;
    margin-top: 10px;
    margin-bottom: 15px;
    border: solid 1px #f73657;
    border-radius: 3px;
   
    .arrow {
      display: flex;
      align-items: center;
      img {
        width: 12px;
      }
    }
  }
  .sub {
    height: 40px;
    background-color: #f73657;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
  }
  .end {
    background-color: #ccc;
  }
}
.payTitle {
  font-weight: bold;
  font-family: PingFangSC-Regular;
  letter-spacing: 0.5px;
}
.zcTitleBox {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  background-color: #fff;
  .zcTitleIn {
    margin: 0 auto;
    display: flex;
    align-items: center;
    letter-spacing: -2px;
    .title {
      font-size: 18px;
      color: #333;
      margin: 0 10.5px;
    }
    .star {
      width: 11.5px;
    }
  }
}
.tip {
  font-size: 12px;
  color: #999;
  margin-bottom: 19px;
  line-height: 1.5;
  &.tip1{
    margin-bottom: 5px;
  }
}
.aboutPic{
  overflow: hidden;

  ul {
    padding: 5px;
    li{
      width: 50%;
      float: left;
      padding: 5px;
      box-sizing: border-box;
      img{
        vertical-align: top;
      }
    }
  }
}
.pathIcon{
  padding: 0 4% 10px;
}
.zcGoodsBox {
  //   margin-top: 4px;
  background-color: #fff;
  padding: 0px 16px;
}
.forListBox {
  .item {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
    background-color: #ffffff;
    box-shadow: 0px 2px 8px 0px rgba(31, 28, 92, 0.05);
    border-radius: 2px;
    .itemLeft {
      width: 112px;
      height: 112px;
      margin-right: 18px;
      img {
        width: 112px;
        height: 112px;
        border-radius: 2px 0 0 2px;
      }
    }
    .itemRight {
      text-align: left;
      flex: 1;
      padding: 8px 0;
      box-sizing: border-box;
      overflow: hidden;
      .goodsName {
        font-size: 15px;
        color: #333;
        // line-height: 30px;
        // margin-bottom: 8px;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        line-height: 20px;
      }
      .description {
        white-space: normal;
        font-size: 12px;
        color: #777;
        // padding-top: 4px;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 1.5;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .price {
        font-size: 13px;
      }
      .zcPrice {
        color: #f73657;
        margin-top: 5px;
      }
      .salePrice {
        margin-top: 6px;
        color: #777;
      }
    }
  }
  .expendBox {
    padding: 0 0 20px;
  }
  .expend {
    text-align: center;
    img {
      width: 120px;
    }
  }
}
.oganizationBox {
  background-color: #fff;
  margin-top: 10px;
  padding-bottom: 65px;
  .zcTitleBox {
    padding-top: 20px;
  }
  .tip2 {
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
  }
  .tipMrg {
    margin-bottom: 0;
  }
  .tipMrg2 {
    margin-bottom: 10px;
  }
  .tipMrg3 {
    margin-bottom: 15px;
  }
  .allNumber {
    font-size: 13px;
    color: #999;
  }
}
.tipGo {
  color: #555;
}
.arriveAdress {
  padding: 0 16px;
  box-sizing: border-box;
  .arriveTime {
    .arriveTimeHead {
      display: flex;
      align-items: center;
    }
    img {
      width: 14px;
    }
    span {
      font-size: 14px;
      color: #333;
      margin-left: 8px;
    }
  }
  p {
    text-align: left;
    margin-top: 6px;
  }
  .arriveAdressList {
    text-align: left;
    li {
      margin-top: 6px;
      color: #555;
      font-size:12px;
      display: flex;
      line-height: 20px;
      span:last-child {
        flex: 1;
      }
    }
  }
}
/deep/ .picker-slot{
  font-size:15px;
  color: #555;
}
/deep/ .picker-item.picker-selected{
  color: #f73657;
  font-size:17px;
}
</style>


